<template>
  <div class="app-container">
    <div class="top">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="供应商" class="form-left">
          <el-select
            v-model="formInline.selected_supplier"
            v-loading="formInline.supplier_loading"
            placeholder="请选择供应商"
          >
            <el-option v-for="item in formInline.suppliers" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item class="form-right">
          <el-button
            :type="formInline.selected_supplier?'primary':'info'"
            :disabled="!formInline.selected_supplier"
            style="width:100%;"
            :loading="loading"
            @click="onSubmit"
          >确认
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="line" />
    <div style="display: inline-block; width: 100%;">
      <div style="display: inline-block;text-align: center;width: 100%">
        <span>供应商：</span>
        <svg-icon icon-class="supplier" />
        |
        <span>目录：</span>
        <svg-icon icon-class="catalog" />
        |
        <span>产品：</span>
        <svg-icon icon-class="product" />
        |
        <span>图片：</span>
        <svg-icon icon-class="image" />
      </div>
    </div>
    <div class="line" />
    <el-input
      v-if="dataTree.length"
      v-model="filterText"
      style="margin-left: 40px;margin-right:800px;"
      placeholder="输入关键字进行过滤"
      class="mt-input"
    />
    <div class="bottom">
      <el-tree
        ref="tree2"
        v-loading="dataLoading"
        :data="dataTree"
        :props="defaultProps"
        node-key="id"
        class="mt-tree"
        show-checkbox
        :filter-node-method="filterNode"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span><svg-icon :icon-class="data.type" style="margin-left: 20px; margin-right: 20px" />{{ node.label }}</span>
          <span
            v-if="data.type === 'supplier'"
          >站点: {{ data.site }} | 电话: {{ data.tel }} | 更新时间: {{ data.update_at }}</span>
          <span v-else-if="data.type === 'catalog'">更新时间: {{ data.update_at }}</span>
          <span v-else-if="data.type === 'product'">原价: {{ data.original_price }} | 图片数量: {{ data.children.length }} | 更新时间: {{ data.update_at }}</span>
          <img
            v-else
            v-else-if="data.type === 'image' && data.url"
            :src="data.url"
            class="item img img-thumbnail"
            @click="handleViewImage(data.url)"
          >
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { Get as getSupplier } from '@/api/erp/elicink/supplier'
import { GetTree } from '@/api/erp/elicink/supplier'

export default {
  data() {
    return {
      selected_supplier: null,
      suppliers: [],
      filterText: '',
      dataTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      formInline: {
        // 供应商
        supplier_loading: true,
        selected_supplier: '',
        suppliers: []
      },
      loading: false,
      dataLoading: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.fetchSupplier()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      const temp = (data.name || data.title).toLowerCase()
      return temp.indexOf(value.toLowerCase()) !== -1
    },
    // 获取供应商
    fetchSupplier() {
      getSupplier().then(response => {
        this.formInline.suppliers = response.data.data
        this.formInline.supplier_loading = false
      }).catch(err => {
        console.log(err)
        this.formInline.supplier_loading = false
      })
    },
    onSubmit() {
      this.loading = true
      this.dataLoading = true
      GetTree(`s_id=${this.formInline.selected_supplier}`).then(response => {
        this.dataTree = response.data
        this.loading = false
        this.dataLoading = false
      })
    },
    handleViewImage(v) {
      window.open(v)
    }
  }
}
</script>

<style scoped>
  body {
    background-color: black;
  }

  .line {
    height: 2px;
    background-color: #d3d3d3;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .mt-input >>> .el-input__inner {
    text-align: center;
    width: 90%;
    padding-left: 100px;
  }

  .el-tree {
    text-align: center;
    width: 100%;
    background: rgba(246, 246, 246, 0.9)
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .top >>> .el-form {
    width: 100%;
  }

  .form-left {
     width: 82%;
   }

  .form-left >>> .el-input__inner {
    width: 100%;
  }

  .form-left >>> .el-select {
    width: 100%;
  }

  .form-left >>> .el-form-item__content {
    width: calc(100% - 60px);
  }

  .form-right {
    margin-left: 20px;
    margin-right: 20px;
    width: 8%;
  }

  .form-right >>> .el-form-item__content {
    width: 100%;
  }

  .bottom {
    width: 95%;
    /*background: rgb(255, 255, 255);*/
    padding: 8px;
    margin: 20px;
    text-align: center;
    display: inline-block;
  }

  .bottom >>> .el-tree {
    width: 100%;
  }

  .img-thumbnail {
    border-color: #ccc !important;

    padding: 4px;
    line-height: 1.42857;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;

    height: 50px;
    width: 90px
  }

  .mt-tree >>> .el-tree-node__content {
    height: 46px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    height: 60px;
  }
</style>
